<template>
	<view class="paddingLeft-24 paddingRight-24">
		<view class="width-350 height-350" style="margin: 0 auto; margin-top: 226rpx;">
			<image :src="pic" mode="" style="width: 100%; height: 100%;"></image>
		</view>
		<view class="fontSize-40 weight-700 color-333 text-center marginTop-40">
			{{title}}
		</view>
		<view class="fontSize-28 color-666 text-center  marginTop-20 paddingLeft-55 paddingRight-55">
			{{desc}}
		</view>
		<view class="width-702 height-104 borderRadius-92 colorBj-51D580 color-white text-center btn"
			style="line-height: 104rpx;" @click='btnClick'>
			{{btnText}}
		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';
	const getRemWordDescApi = inject('getRemWordDesc')
	const getRemWordListApi = inject('getRemWordList')
	const descList = ref([])
	const step = ref(0)
	const index = ref(0)
	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const btnText = ref('去装饰')
	const region_num = uni.getStorageSync('region_num');
	const pic=ref('')
	const title=ref('')
	const desc=ref('')
	onLoad((op) => {
		step.value = op.step
		page.value = op.page
		big_sort.value = op.big_sort
		small_sort.value = op.small_sort
		getRemWordDescApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
		}).then(res => {
			console.log(res, 999999999)
			descList.value = res.stepDesc
			pic.value=res.stepDesc[index.value].pic
			title.value=res.stepDesc[index.value].title
			desc.value=res.stepDesc[index.value].desc
		})

		index.value = step.value - 1
		console.log(index.value)
		if (step.value == 1) {
			btnText.value = '去装饰'
		} else if (step.value == 2) {
			btnText.value = '成员拉手'
		}  else if (step.value == 3) {
			btnText.value = '去记忆'
		} else if (step.value == 4) {
			btnText.value = '去录制'
		}




	})
	const btnClick = () => {
		if (step.value == 1) {
			uni.redirectTo({
				url: '/pagesA/reciteWords/oneStage?big_sort=' + big_sort.value +
					'&page=' + page.value + '&small_sort=' + small_sort.value
			})
		} else if (step.value == 2) {
			getRemWordListApi({
				page: page.value,
				small_sort: small_sort.value,
				big_sort: big_sort.value
			}).then(res => {
				console.log(res, 106)
				if (res.waitWordList.length == 0) {
					uni.redirectTo({
						url: "/pagesA/reciteWords/wordArea?big_sort=" +
							big_sort.value +
							"&page=" +
							page.value +
							"&small_sort=" +
							small_sort.value +
							"&region_num=" +
							region_num.value,
					});
				} else {
					uni.redirectTo({
						url: "/pagesA/reciteWords/twoStage?big_sort=" +
							big_sort.value +
							"&page=" +
							page.value +
							"&small_sort=" +
							small_sort.value +
							"&region_num=" +
							region_num.value,
					});
				}
			})
		}  else if (step.value == 3) {
			uni.redirectTo({
				url: '/pagesA/reciteWords/fourStage?big_sort=' + big_sort.value +
					'&page=' + page.value + '&small_sort=' + small_sort.value
			})
		} else if (step.value == 4) {
			uni.redirectTo({
				url: '/pagesA/reciteWords/fiveStage?big_sort=' + big_sort.value +
					'&page=' + page.value + '&small_sort=' + small_sort.value
			})
		}
		// else if (step.value == 3) {
		// 	uni.redirectTo({
		// 		url: '/pagesA/reciteWords/threeStage?big_sort=' + big_sort.value +
		// 			'&page=' + page.value + '&small_sort=' + small_sort.value
		// 	})
		
		// }
	}
</script>

<style scoped lang="scss">
	.btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>